@import 'src/style/modules';

/*
  Resource Editable Description
  ------------------------------------------------------------------------------
*/

.resource-description {
  width: 100%;
  min-height: $form-xs-height;
}

.resource-description--preview,
.input.resource-description--input > input {
  font-size: $form-xs-font;
  font-weight: 500;
  font-family: $ix-text-font;
}

.resource-description--preview,
.resource-description--input {
  position: relative;
  width: 100%;
}

.resource-description--preview {
  width: auto;
  display: inline-block;
  border-radius: $radius;
  position: relative;
  overflow: hidden;
  @include no-user-select();
  color: $g13-mist;
  transition: color 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease;
  line-height: $form-xs-font + $ix-border;

  .icon {
    position: relative;
    top: -2px;
    display: inline-block;
    margin-left: $ix-marg-b;
    opacity: 0;
    transition: opacity 0.25s ease;
    color: $g11-sidewalk;
  }

  &:hover .icon {
    opacity: 1;
  }

  &.untitled {
    color: $g9-mountain;
    font-style: italic;
  }

  &:hover {
    cursor: text;
    color: $g20-white;
  }
}

/* Ensure placeholder text matches font weight of title */
.input.resource-description--input > input {
  &::-webkit-input-placeholder {
    font-weight: $page-title-weight !important;
  }
  &::-moz-placeholder {
    font-weight: $page-title-weight !important;
  }
  &:-ms-input-placeholder {
    font-weight: $page-title-weight !important;
  }
  &:-moz-placeholder {
    font-weight: $page-title-weight !important;
  }
}
